<!-- @link https://konvajs.org/docs/sandbox/Scale_Image_To_Fit.html -->
<!-- zIndex 的作用 @link http://konvajs-doc.bluehymn.com/docs/groups_and_layers/zIndex.html -->
<!-- 分层api moveDown()使用 @link http://konvajs-doc.bluehymn.com/docs/groups_and_layers/Layering.html -->
<!DOCTYPE html>
<html>

<head>
    <script src="./konva@9.3.12.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva test</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            /* overflow: hidden; */
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script>
        const stage = new Konva.Stage({
            container: 'container',
            width: window.innerWidth,
            height: window.innerHeight,
        });

        const layer = new Konva.Layer();
        stage.add(layer);
        var group1 = new Konva.Group();
        layer.add(group1);
        var group2 = new Konva.Group();
        layer.add(group2);


        let rect1 = new Konva.Rect({
            x: 30,
            y: 30,
            width: 330,
            height: 330,
            fill: '',
            stroke: 'red',
            strokeWidth: 2,
            draggable: true,
            // zIndex: 999,// 无用没这个属性
        });
        layer.add(rect1);
        // group1.add(rect1);// 分组，按需用，应该是为了批量操作需求
        // rect1.zIndex(2);// 跟css中zIndex不同

        setTimeout(() => {
            // console.log("move");
            // rect2.move({
            //     x: 30,
            //     y: 30
            // });
            console.log("resize");
            // rect1.size({
            //     width: 600,
            //     height: 600
            // });

            // rect1.destroy();
            // console.log(rect1);
        }, 2000);


        Konva.Image.fromURL(
            'https://konvajs.org/assets/darth-vader.jpg',
            (img) => {
                let sc_w = img.width();
                let sc_h = img.height();
                let scale_val = 3;
                img.setAttrs({
                    width: sc_w * scale_val,
                    height: sc_h * scale_val,
                    x: 20,
                    y: 20,
                    name: 'image',
                    draggable: true, // 是否拖拽
                    // fill: "green",
                    // opacity: 1, // 透明度
                    // visible: false,
                    // opacity: 0.1,
                });
                layer.add(img);
                // img.fill("green");
                img.moveDown();
                let img2 = img.clone();
                img.hide();
                // layer.draw(); // 自动重绘了？？
                // group2.add(img);

                img2.toImage({
                    callback(img1) {
                        // 有问题，不像这样写
                        console.log("xxx", img1);
                        let sc_w = img1.width;
                        let sc_h = img1.height;
                        let image = new Konva.Image({
                            image: img1,
                            width: sc_w,
                            height: sc_h,
                            x: 60,
                            y: 60,
                            name: 'image2',
                            draggable: false,
                            // opacity: 0.1
                        });
                        layer.add(image);
                        // layer.draw();
                    },
                    mimeType: "image/jpeg", // "image/png" or "image/jpeg". "image/png" is the default
                    x: 20, //	Number x position of canvas section
                    y: 20, // Number y position of canvas section
                    width: 300, // Number width of canvas section
                    height: 300, // Number height of canvas section
                    quality: 0.5, // Number jpeg quality. If using an "image/jpeg" mimeType,you can specify the quality from 0 to 1, where 0 is very poor quality and 1 is very high quality
                    pixelRatio: 1, // 	Number pixelRatio of output image. Default is 1. You can use that property to increase quality of the image, for example for super hight quality exports or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image. If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
                    imageSmoothingEnabled: false, //	Boolean	<optional> set this to false if you want to disable imageSmoothing
                });

                

            }
        );
    </script>
</body>

</html>